<template>
	<view>
		<view class="home_item0">
			<view class="home_item0_floor1">
				<view style="margin-top: 0;" class="journal_floor2_item1" @click="cityBtn()">
					<view class="journal_floor2_item1_lft"></view>
					<view class="journal_floor2_item1_rgt">{{city.name}}></view>
				</view>
				<view style="margin-top: 0;" class="journal_floor2_item1" @click="gps()">
					<view class="journal_floor2_item1_rgt">当前定位</view>
					<image @click="gps()" class="home_item0_img" src="../../../static/img/tabbar/d.png" mode=""></image>
				</view>
			</view>
			<view class="aaa">
				<view class="home_floor1">
					实时数据
					<text @click="shishigo()">详细天气情况></text>
				</view>
				<view class="home_floor2s">
					<view class="home_floor2_box">
						<view class="home_floor2_box_text1">
							{{shiData.temp?shiData.temp:'无'}}℃
						</view>
						<view class="home_floor2_box_text2">
							体感温度{{shiData.feelsLike?shiData.feelsLike:'无'}}℃
						</view>
					</view>
					<view class="home_floor2_box">
						<view class="home_floor2_box_text1">
							<image class="home_floor2_box_text1_img" src="../../../static/img/Fine.png" mode="">
							</image>
						</view>
						<view class="home_floor2_box_text2">
							{{shiData.text?shiData.text:'无'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="aaa">
			<uni-swiper-dot :info="info" :dots-styles="dotsStyles" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item,index) in info" :key="index">
						<view class="swiper-item">
							<view class="home_floor1">
								{{item.fxDate}}
								<!-- {{xiaoshidata[23].fxTime | dateFormat}} -->
							</view>
							<view class="home_floor2s">
								<view class="home_floor2_box">
									<view class="home_floor2_box_text1">
										{{item.textDay?item.textDay:'无'}}
									</view>
									<view class="home_floor2_box_text2">
										{{item.tempMax?`${item.tempMax}°~${item.tempMin}°`:'无'}}
									</view>
								</view>
								<view class="home_floor2_box">
									<view class="home_floor2_box_text1">
										<image class="home_floor2_box_text1_img" src="../../../static/img/Fine.png"
											mode="">
										</image>
									</view>
									<view class="home_floor2_box_text2" @click="go(item)">
										详细天气情况>

									</view>
								</view>
							</view>
							<!-- <view class="home_floor1">
								<text class="home_floor1_text">
									详细天气情况>
								</text>
							</view> -->
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="home_item2">
			<view class="bbb">
				<view class="journal_floor2_item1">
					<view class="journal_floor2_item1_lft"></view>
					<view class="journal_floor2_item1_rgt">小时温度趋势</view>
				</view>
				<view class="homeContent_floor4_item2">
					<qiun-data-charts type="line" :chartData="xiaoshidata" :canvas2d="true" background="none"
						:inScrollView="true" :tapLegend="false" canvasId="bbbbbbbbbb" :disableScroll="true"
						:ontouch="true" />
				</view>
				<view class="journal_floor2_item1">
					<view class="journal_floor2_item1_lft"></view>
					<view class="journal_floor2_item1_rgt">小时天气趋势</view>
				</view>
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="100">时间</uni-th>
						<uni-th align="center" v-for="(item,index) in xiaoshidata.categories" :key="index">{{item}}
							时</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">天气</uni-td>
						<uni-td align="center" v-for="(item,index) in xiaoshitianqi.text" :key="index">{{item}}
						</uni-td>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">风向</uni-td>
						<uni-td align="center" v-for="(item,index) in xiaoshitianqi.windDir" :key="index">{{item}}
						</uni-td>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">风速</uni-td>
						<uni-td align="center" v-for="(item,index) in xiaoshitianqi.windSpeed" :key="index">
							{{item}}公里/小时
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				city:{},
				current: 0,
				mode: 'round',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .3)',
					border: '1px rgba(255, 255, 255, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, .9)',
					selectedBorder: '1px rgba(255, 255, 255, .9) solid'
				},
				gpsData: {
					j: '',
					w: ''
				},
				xiaoshidata: {
					categories: ["6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00"],
					series: [{
						name: "出场",
						data: [70, 40, 65, 100, 44, 68, 20],
					}, ],
				},
				shiData: {

				},
				xiaoshitianqi: {
					text: [],
					windDir: [],
					windSpeed: []
				}
			}

		},
		onLoad() {
			this.gps()
			// console.log(moment(new Date()).format('hh'))
		},
		methods: {
			cityBtn(){
				uni.navigateTo({
					url: 'city' 
				});
			},
			upDate(){
				this.city = this.$store.state.city
				this.tianqi()
				this.shi()
				this.xiaoshi()
			},
			go(e) {
				let item = encodeURIComponent(JSON.stringify(e));
				uni.navigateTo({
					url: 'models?item=' + item
				});
			},
			shishigo() {
				let item = encodeURIComponent(JSON.stringify(this.shiData));
				uni.navigateTo({
					url: 'model?item=' + item
				});
			},
			change(e) {
				this.current = e.detail.current;
			},
			gps() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.gpsData.j = res.longitude || "";
						this.gpsData.w = res.latitude || "";
						console.log(this.gpsData)
						this.chengshi()
					}
				});
			},
			chengshi() {
				uni.request({
					url: "https://geoapi.qweather.com/v2/city/lookup",
					data: {
						location: `${this.gpsData.j},${this.gpsData.w}`,
						key: this.$store.state.key
					},
					method: "get",
					success: (res) => {
						this.$store.commit("citys", res.data.location[0]);
						console.log(this.$store.state.city)
						console.log(2222222)
						this.city = res.data.location[0]
						this.tianqi()
						this.shi()
						this.xiaoshi()
					},
				});
			},
			tianqi() {
				uni.request({
					url: "https://devapi.qweather.com/v7/weather/7d",
					data: {
						location: this.$store.state.city.id,
						key: this.$store.state.key
					},
					method: "get",
					success: (res) => {
						console.log(res)
						this.info = res.data.daily
					},
				});
			},
			shi() {
				uni.request({
					url: "https://devapi.qweather.com/v7/weather/now",
					data: {
						location: this.$store.state.city.id,
						key: this.$store.state.key
					},
					method: "get",
					success: (res) => {
						console.log(res)
						this.shiData = res.data.now
					},
				});
			},
			xiaoshi() {
				uni.request({
					url: "https://devapi.qweather.com/v7/weather/24h",
					data: {
						location: this.$store.state.city.id,
						key: this.$store.state.key
					},
					method: "get",
					success: (res) => {
						console.log(res)
						// this.xiaoshidata = res.data.hourly
						let obj = {
							categories: [],
							series: [{
								name: "温度",
								data: [],
							}, ],
						};
						let arr = {
							text: [],
							windDir: [],
							windSpeed: []
						};
						res.data.hourly.forEach((item, index) => {
							obj.categories.push(moment(item.fxTime).format('hh:mm'));
							obj.series[0].data.push(item.temp)
							arr.text.push(item.text)
							arr.windDir.push(item.windDir)
							arr.windSpeed.push(item.windSpeed)
						})
						this.xiaoshidata = obj
						this.xiaoshitianqi = arr
					},
				});
			}
		}
	}
</script>

<style scoped>
	@import "../../../common/css/home.css";
</style>
